<template>
  <div>
    <div class="crumbs">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-lx-warn"></i> 权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>裁判管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <el-card shadow="hover">
      <el-button type="primary" @click="handleAdd()" icon="el-icon-plus" class="btn_add">添加</el-button>
      <el-table :data="judgeData" border style="width:100%">
        <el-table-column label="裁判编号" prop="judgeId" align="center"/>
        <el-table-column label="裁判姓名" prop="judgeName" align="center"/>
        <el-table-column align="center">
                <template #header>
                    操作
                </template>
                <template #default="scope">
                    <el-button size="small" type="danger" icon="el-icon-delete"
                      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
      </el-table>
      <!-- 编辑弹出框 -->
      <el-dialog title="添加裁判" center v-model="dialogVisible"> 
        <el-card>
          <el-form :model="infoForm" :rules="rules" ref="register" label-width="auto">
            <el-form-item prop="name">
              <el-input type="name" placeholder="请输入姓名" v-model="infoForm.name">
                  <template #prepend>
                      <el-button icon="el-icon-user">姓名</el-button>
                  </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" placeholder="请输入密码" v-model="infoForm.password">
                  <template #prepend>
                      <el-button icon="el-icon-lock">密码</el-button>
                  </template>
              </el-input>
            </el-form-item>

            <el-form-item prop="phone">
              <el-input type="phone" placeholder="请输入手机号" v-model="infoForm.phone">
                  <template #prepend>
                      <el-button icon="el-icon-phone">手机号</el-button>
                  </template>
              </el-input>
            </el-form-item>
          </el-form>
        </el-card>
          
        <template #footer>
          <el-button type="primary" @click="dialogVisible = false">取消</el-button>
          <el-button type="danger"  @click="saveAdd()">确认</el-button>
        </template>
      </el-dialog>
    </el-card>
    <!-- 分页 -->
    <el-card>
      <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize"
          background="true"
          layout="total, prev, pager, next, jumper"
          :total="parseInt(totalNum)" 
          :page-sizes="pageSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
    </el-card>
  </div>
</template>

<script>
    
import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from "element-plus"
import { useStore } from 'vuex';
import secret from '../utils/secret';
import { map } from 'lodash';
  export default{
    setup() {
      const store = useStore();
      onMounted(()=>{
        getJudgeList();
      })
      //裁判列表
      const judgeData = reactive([]);
      //获取裁判列表
      const getJudgeList = ()=>{
        store.dispatch("GetJudgeList",{
          page:currentPage.value,
          pageSize:pageSize.value
        }).then(res=>{
          totalNum.value = res.obj.records;
          if(res.code===200){
            judgeData.splice(0,judgeData.length,...map(res.obj.rows,item=>{
              return {
                judgeId:item.jid,
                judgeName:item.name
              }
            }));
          }else{
            console.log("分页获取裁判失败",res.msg);
          }
        }).catch(err=>{
          console.log("分页获取裁判异常",err);
        })

      }
      //删除
      const handleDelete = (index,row)=>{
        // console.log("删除索引为",index,"删除的数据为",row);
        store.dispatch("DeleteJudge",row.judgeId).then(res=>{
          if(res.code===200){
            judgeData.splice(index,1);
            ElMessage({
              type:"success",
              message:"删除成功",
              center:true
            });
          }else{
            ElMessage({
              type:"error",
              message:"删除失败",
              center:true
            });
          }
        }).catch(err=>{
          console.log("删除异常",err);
        })
      }

      /*添加裁判*/
      const dialogVisible = ref(false);
      const infoForm = reactive({
        name:"特朗普",
        password:"123456ab",
        phone:"13112345678",
        other:'1',
      })
      const rules = {
            name: [
                {required:true,message:'姓名不能为空'},
                {pattern:/^[\u4e00-\u9fa5]{2,9}$/,message:'不符合姓名规则'}
            ],
            password: [
                { required: true, message: "请输入密码", trigger: "blur" },
                {pattern:/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,message:'长度至少为8，至少含有一个字母和一个数字'}
            ],
            phone:[
                {required:true,message:'手机号不能为空'},
                {pattern:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                    message:'不符合手机规则'}
            ]
        };
      const handleAdd = ()=>{
        dialogVisible.value = true;
      }

      const saveAdd = ()=>{
        store.dispatch("AddJudge",{
          Name:infoForm.name,
          other:infoForm.other,
          userName:infoForm.name,
          password:secret.Encrypt(infoForm.password),
          phoneNum:infoForm.phone
        }).then(res=>{
          if(res.code===200){
            ElMessage({
              type:"success",
              message:"添加成功",
              center:true
            });
            dialogVisible.value = false;
            getJudgeList();
          }else{
            ElMessage({
              type:"error",
              message:"添加失败, "+res.message,
              center:true
            });
          }
        }).catch(err=>{
          console.log("添加异常",err);
        })
      }

      //分页
      let currentPage = ref(1);
      let pageSize = ref(5);
      let totalNum = ref(14);//总条数除以每页显示条数5
      const handleSizeChange = (val) => {
          console.log(`${val} items per page`)
      }
      const handleCurrentChange = (val) => {
          console.log(`current page: ${val}`)
          getJudgeList();
      }
      return {
          judgeData,
          handleDelete,
          //添加裁判
          dialogVisible,
          infoForm,
          rules,
          handleAdd,
          saveAdd,
          //分页
          currentPage,
          pageSize,
          totalNum,
          handleSizeChange,
          handleCurrentChange,
      }
    }
  }
   
</script>

<style scoped>
.btn_add{
    margin: 10px 0px;
    float:right;
}
.title{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}
</style>